<template>
    <div class="app-container">
        <!--     操作   -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDept">新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getdatafromback('-1')"></right-toolbar>
        </el-row>

        <!--   列表 -->
        <el-table v-loading="loading" :data="deptList" row-key="orgCode" border lazy :load="loadChildren" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="orgCode" label="组织ID"></el-table-column>
            <el-table-column prop="orgName" label="组织名称"></el-table-column>
            <el-table-column prop="orgTag" label="组织标签" :formatter="getOrgTagFormat"></el-table-column>
<!--            <el-table-column prop="orgStatus" label="组织类型"></el-table-column>-->
            <el-table-column prop="remark" label="备注"></el-table-column>
            <!--        局部操作    -->
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-plus" @click="handleDept(scope.row)">新增</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateDept(scope.row)">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" :disabled="!scope.row.isLeaf" @click="onDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 添加或修改组织 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="30%" append-to-body>
            <dept-form :deptForm="deptForm" @submitForm="getdatafromback('-1')" @cancelDialog="cancel" ></dept-form>
        </el-dialog>

    </div>
</template>

<script>
import {getorganization, deleteorganization} from '@/api/organization/organization'
import Treeselect from "@riophae/vue-treeselect";
import deptForm from "./form/deptForm";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "index",
    components: {Treeselect,deptForm},
    data() {
        return {
            // 遮罩层
            loading: true,
            // 查询参数
            queryParams: {
                orgCode: undefined,
            },
            // 表格树数据
            deptList: [],
            // 组织标签数据字典
            getOrgTagOptions: [],
            // 组织表单
            deptForm: {},
            maps: new Map(),
            // 显示搜索条件
            showSearch: true,
            // 弹出层标题
            title: "",
            // 是否弹出层
            open: false,
        }
    },
    created() {
        // 初始化父组织列表
        this.getdatafromback('-1');
        //查询组织标签字典状态
        this.getDicts("org_tag").then(response => {
            this.getOrgTagOptions = response.responseBody.result;
        });
    },
    methods: {
        // 查询父组织列表
        getdatafromback(orgCode) {
            this.loading = true;
            getorganization({'searchParams': {'orgCode': orgCode}}).then(res => {
                this.deptList = this.handleChildren(res.responseBody);
                this.loading = false;
            })
        },

        // 树形结构加载
        loadChildren: function (tree, treeNode, resolve) {
            var orgCode = tree.orgCode;
            this.maps.set(orgCode, { tree, treeNode, resolve })
            getorganization({ 'searchParams': { 'orgCode': orgCode } }).then(res => {
                resolve(this.handleChildren(res.responseBody));
                this.loading = false;
            })
        },
         /** 重新加载指定节点  */
        reloadFn(parentCode) {
            const { tree, treeNode, resolve } = this.maps.get(parentCode)
            this.loadChildren(tree, treeNode, resolve)
        },
        // 后端返回的数据对象处理，当存在子节点时显示图标
        handleChildren: function (deptList) {
            if(deptList){
                deptList.forEach((item, index) => {
                    if(item.attributes.count){
                        item.hasChildren = true;
                    }
                })
            }
            return deptList;
        },

        // 组织标签字典翻译
        getOrgTagFormat(row, column) {
            return this.selectDictLabel(this.getOrgTagOptions, row.orgTag);
        },

        /** 新增组织按钮操作 */
        handleDept(row) {
            this.deptForm.parentCode = row.orgCode ? row.orgCode : '-1';
            this.deptForm.id = undefined;
            this.open = true;
            this.title = "新增组织";
        },

        /** 修改组织按钮操作 */
        handleUpdateDept(row) {
            this.deptForm.parentCode = undefined;
            this.deptForm.orgCode = row.orgCode;
            this.deptForm.orgName = row.orgName;
            this.deptForm.orgStatus = row.orgStatus;
            this.deptForm.orgTag = row.orgTag;
            this.deptForm.remark = row.remark;
            this.deptForm.id = row.id
            this.open = true;
            this.title = "修改组织";
        },

        /** 删除组织按钮操作 */
        onDelete(row) {
            this.$confirm('确定要删除该组织吗?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function() {
                return deleteorganization(row.orgCode);
            }).then(res => {
                if (res.retCode === '200') {
                    this.$message.success('删除成功！')
                    this.getdatafromback('-1');
                    this.reloadFn(row.parentCode);
                } else {
                    this.$message.error('删除失败！  错误号：' + res.retCode)
                    this.getdatafromback('-1');
                }
            })
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.deptForm= {orgStatus: undefined,parentCode: '-1',orgCode: undefined,orgName: undefined,remark: undefined,id: undefined};
        },
    }
}
</script>
